<!--根据这个页单独设置样式-->
<style>
    .table-responsive {
        overflow-x: inherit
    }

    td {
        vertical-align: middle !important;
    }

    .node-list li {
        display: inline-block
    }

    select{
        width:300px;
        vertical-align: middle;
    }
    p{
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }

</style>
<div>
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">
            商品编辑

            <button class="btn btn-sm pull-right btn-success" ng-click="ctrl.vm.ok()">保存</button>
        </h1>
    </div>
    <div class="padder-md m-b-none m-t" style="padding-top: 0">
        <div class="col-sm-12">
            <div  class="tab-form-demo">
                <uib-tabset >
                    <uib-tab index="1" heading="基本信息">
                        <div style="background: #fff;padding:20px;">
                            <div class="panel panel-default">
                                <div class="table-responsive">
                                    <div class="panel-body" style="padding:10px 50px;">
                                        <div class="form-group">
                                            <label>名字：</label>
                                            <div>
                                                <input class="form-control ng-pristine ng-invalid  ng-touched m-b"
                                                       placeholder="100字以内"    type="text" ng-model="ctrl.vm.data.name" >
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>广告词：</label>
                                            <div>
                                                <div class="m-b">
                                                    <input type="text"      placeholder="50字以内"
                                                           class="form-control ng-pristine ng-invalid  ng-touched "
                                                           ng-model="ctrl.vm.data.promo_words" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>基础价格：</label>
                                            <div>
                                                <div class="m-b">
                                                    <input type="text"  placeholder="参考价格,不作为售卖价格"
                                                           class="form-control ng-pristine ng-invalid  ng-touched "
                                                           ng-model="ctrl.vm.data.price" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>简介：</label>
                                            <div>
                                                <div class="m-b">
                                                   <textarea style="height:180px;" ng-model="ctrl.vm.data.short_description"
                                                             placeholder="150字以内"      class="form-control ng-pristine ng-invalid  ng-touched ">
                                                   </textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>描述：</label>
                                            <div>
                                                <div class="m-b">
                                                   <textarea style="height:200px;" ng-model="ctrl.vm.data.description"
                                                             placeholder="300字以内"     class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched ">
                                                   </textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>重量：</label>
                                            <div>
                                                <div class="m-b">
                                                    <input type="text"  placeholder="重量是非必填的！"
                                                           class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched "
                                                           ng-model="ctrl.vm.data.weight" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>新品开始：</label>
                                            <div>
                                                <div class="m-b">
                                                    <p class="input-group"  style="width:200px;">
                                                        <input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.vm.data.new_start"
                                                               is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"
                                                               placeholder={{ctrl.vm.data.new_start}} ng-change="ctrl.vm.changeTimeE()"/>
                                                        <span class="input-group-btn">
                                                        <button type="button" class="btn btn-default"
                                                                ng-click="open()"><i
                                                                class="glyphicon glyphicon-calendar"></i>
                                                        </button>
                                                     </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>新品结束：</label>
                                            <div>
                                                <div class="m-b">
                                                    <p class="input-group"  style="width:200px;">
                                                        <input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.vm.data.new_end"
                                                               is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"
                                                               placeholder={{ctrl.vm.data.new_end}} ng-change="ctrl.vm.changeTimeE()"/>
                                                        <span class="input-group-btn">
                                                        <button type="button" class="btn btn-default"
                                                                ng-click="open1()"><i
                                                                class="glyphicon glyphicon-calendar"></i>
                                                        </button>
                                                     </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>状态：</label>
                                            <div>
                                                <div class="m-b">
                                                    <label class="i-switch m-t-xs m-r">
                                                        <input type="checkbox"
                                                               ng-true-value="'1'"
                                                               ng-false-value="'0'"
                                                               ng-model="ctrl.vm.data.status" >
                                                        <i></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>搜索可见：</label>
                                            <div>
                                                <div class="m-b">
                                                    <label class="i-switch m-t-xs m-r">
                                                        <input type="checkbox"
                                                               ng-true-value="'1'"
                                                               ng-false-value="'0'"
                                                               ng-model="ctrl.vm.data.is_search" >
                                                        <i></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </uib-tab>
                    <uib-tab index="2" heading="分类">
                        <div style="background: #fff;padding: 20px;">
                            <div class="panel panel-default">
                                <div class="table-responsive" style="padding:10px 50px;">
                                    <div class="row "  ng-repeat="ctrllor in ctrl.vm.catalogData">
                                        <div class="col-sm-12  b-light">
                                            <div class="line line-solid b-b line-lg m-n" ng-if="$index >0"></div>
                                            <div class="checkbox ">
                                                <label class="i-checks ">
                                                    <input type="checkbox"
                                                           ng-model="ctrllor.select"
                                                           ng-change="changeFn(ctrllor,1)">
                                                    <i></i>
                                                    {{ctrllor.name}}
                                                </label>
                                            </div>

                                        </div>
                                        <div class="col-sm-12  b-light" style="padding-left: 50px;" ng-repeat="func in ctrllor.children">
                                            <div class="checkbox ">
                                                <label class="i-checks ">
                                                    <input type="checkbox" ng-model="func.select" ng-change="changeFn(func,0,ctrllor)">
                                                    <i></i>
                                                    {{func.name}}
                                                </label>
                                                <div class="col-sm-12">
                                                    <ul class="node-list m-b-sm m-t-sm padder">
                                                        <li class="m-r-sm m-l-sm" ng-repeat="func2 in func.children">
                                                            <div class="checkbox">
                                                                <label class="i-checks">
                                                                    <input type="checkbox" ng-model="func2.select"  ng-change="changeFn(func2,-1,func)">
                                                                    <i></i>
                                                                    {{func2.name}}
                                                                </label>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </uib-tab>
                    <uib-tab index="3" heading="下拉菜单">
                        <div style="background: #fff;padding: 20px;">
                            <!--<div class="panel panel-default" ng-if="ctrl.vm.biaoShi ==1">-->
                                <!--<div class="panel-heading">-->
                                    <!--第一步:选择属性-->
                                    <!--<i class="text-muted">如果没有下拉菜单可以不选,最多支持三个,保存商品后不可修改.</i>-->
                                <!--</div>-->
                                <!--<div class="table-responsive" style="padding: 10px;padding-left:60px;line-height: 30px;">-->
                                    <!--<div style="padding: 5px">待选：<span style="margin-left: 300px;">已选: <b class="badge bg-info">{{ctrl.vm.attrTestArr.length}}</b></span></div>-->
                                    <!--<select  ng-model="ctrl.vm.attrTest" size="10" style="padding: 5px">-->
                                        <!--<option ng-repeat="item in ctrl.vm.attrData" value="{{item.id}}" >{{item.name}}({{item.alias}})</option>-->
                                    <!--</select>-->
                                    <!--<p style="width: 20px">-->
                                        <!--&lt;!&ndash;<span ng-click="ctrl.vm.toright(ctrl.vm.attrTest,ctrl.vm.attrData)"&ndash;&gt;-->
                                              <!--&lt;!&ndash;ng-if="ctrl.vm.attrTestArr.length<3">&ndash;&gt;-->
                                            <!--&lt;!&ndash;<i style="font-size: 28px;" class="fa-arrow-circle-o-right fa "></i>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</span><br>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<span ng-click="ctrl.vm.toleft(ctrl.vm.attrTest2,ctrl.vm.attrTestArr)">&ndash;&gt;-->
                                             <!--&lt;!&ndash;<i style="font-size: 28px;" class=" fa-arrow-circle-o-left fa "></i>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</span>&ndash;&gt;-->
                                    <!--</p>-->
                                    <!--<select multiple="multiple" ng-model="ctrl.vm.attrTest2" size="10" style="padding: 5px">-->
                                        <!--<option ng-repeat="item in ctrl.vm.attrTestArr track by $index" value="{{item.id}}">{{item.name}}({{item.alias}})</option>-->
                                    <!--</select>-->
                                    <!--<div><span style="margin-left: 350px;">顺序为设置和前台显示顺序 </span></div>-->
                                    <!--<div><button class="btn btn-sm btn-info" ng-click="ctrl.vm.biaoShi=2">下一步</button></div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="panel panel-default" ng-if="ctrl.vm.biaoShi ==2 &&ctrl.vm.attrTestArr.length<=0">
                                <div class="panel-heading">
                                    第二步:价格库存
                                    <i class="text-muted">此商品没有下拉菜单,直接设置价格,库存等信息</i>
                                </div>
                                <div class="table-responsive" style="padding: 10px;line-height: 30px;">
                                    <div class="table-responsive">
                                        <table class="table table-striped b-t b-light">
                                            <thead>
                                            <tr>
                                                <th>价格</th>
                                                <th>条形码</th>
                                                <th>编码</th>
                                                <th>库存</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td><input type="text" class="form-control" ng-model="ctrl.vm.product_stock.price"></td>
                                                <td><input type="text" class="form-control" ng-model="ctrl.vm.product_stock.bar_code"></td>
                                                <td><input type="text" class="form-control" ng-model="ctrl.vm.product_stock.code"></td>
                                                <td><input type="text" class="form-control" ng-model="ctrl.vm.product_stock.stock"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <!--<div>-->
                                            <!--<button class="btn btn-sm btn-info">重置第二部</button>-->
                                            <!--<button class="btn btn-sm btn-default" ng-click="ctrl.vm.biaoShi=1; ctrl.vm.product_stock =[];">返回第一步</button>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default" ng-if="ctrl.vm.biaoShi ==2 &&ctrl.vm.attrTestArr.length>0">
                                <div class="panel-heading">
                                    价格库存
                                    <i class="text-muted">请排列组合下列菜单</i>
                                </div>
                                <div class="table-responsive" style="padding: 10px;line-height: 30px;">
                                    <div class="row wrapper" style="padding-bottom:20px;">
                                        <div class="col-sm-3 col-md-2 col-lg-2" ng-repeat="item in ctrl.vm.attrTestArr">
                                            <select class="form-control" ng-if="$index==0" ng-model="ctrl.vm.testt.one"  ng-change="ctrl.vm.changeAttrMall($index)" >
                                                <option value="">请选择属性</option>
                                                <option ng-repeat="list in item.attr_value" value="{{list}}">{{list.name}}</option>
                                            </select>
                                            <select class="form-control" ng-if="$index==1" ng-model="ctrl.vm.testt.two"  ng-change="ctrl.vm.changeAttrMall($index)" >
                                                <option value="">请选择属性</option>
                                                <option ng-repeat="list in item.attr_value" value="{{list}}">{{list.name}}</option>
                                            </select>
                                            <select class="form-control" ng-if="$index==2" ng-model="ctrl.vm.testt.san"  ng-change="ctrl.vm.changeAttrMall($index)" >
                                                <option value="">请选择属性</option>
                                                <option ng-repeat="list in item.attr_value" value="{{list}}">{{list.name}}</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3 col-md-2 col-lg-2">
                                            <button class="btn  btn-default" ng-click="ctrl.vm.addZuhe()">增加此组合</button>
                                        </div>
                                    </div>
                                    <table class="table table-striped b-t b-light" >
                                        <thead>
                                        <tr>
                                            <th ng-repeat="list in ctrl.vm.attrTestArr ">{{list.name}} <i class="text-muted">({{list.alias}})</i> </th>
                                            <th>价格</th>
                                            <th>条形码</th>
                                            <th>编码</th>
                                            <th>库存</th>
                                            <th>规格图片</th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="list in ctrl.vm.priceList">
                                            <td>{{list.one.name}}</td>
                                            <td ng-if="(list.two!='')&&(list.two.name!='')">{{list.two.name}}</td>
                                            <td ng-if="(list.san!='')&&(list.san.name!='')">{{list.san.name}}</td>
                                            <td><input type="text" ng-change="ctrl.vm.change($index)" class="form-control" ng-model="list.price"></td>
                                            <td><input type="text" ng-change="ctrl.vm.change($index)" class="form-control" ng-model="list.bar_code"></td>
                                            <td><input type="text" ng-change="ctrl.vm.change($index)" class="form-control" ng-model="list.code"></td>
                                            <td><input type="text" ng-change="ctrl.vm.change($index)" class="form-control" ng-model="list.stock"></td>
                                            <td style="padding-right: 20px">
                                                <div class="col-sm-6">
                                                    <img class="content-add-image" style="width: 60%" ng-src="{{list.image|imgwhq:200:400:90}}" err-src="300:300:90" alt="">
                                                </div>
                                                <div class="col-sm-2" style="padding-top: 12%">
                                                    <input type="file" name="certificates" nv-file-select="" uploader="uploaders"
                                                           ng-click="clearItemss($index)" style="position: absolute;width :30%;padding :0 40px ;height:50px;opacity: 0;"/>
                                                    <button class="btn btn-sm btn-default">上传</button>
                                                </div>
                                            </td>
                                            <td>
                                                <button class="btn btn-default btn-sm"
                                                        ng-click="ctrl.vm.priceSev($index,list)"
                                                        ng-disabled="ctrl.vm.flag300[$index]==1"
                                                >确认</button>
                                            </td>
                                            <td ng-if="list.edit==undefined">
                                                <i class="fa fa-times-circle-o fa-fw  ng-scope"
                                                   role="button" tabindex="0" ng-click="ctrl.vm.priceDel($index)"></i>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!--<div style="padding-top: 10px;">-->
                                        <!--<button class="btn btn-sm btn-info" ng-click="ctrl.vm.resetProperty()">重置第二部</button>-->
                                        <!--<button class="btn btn-sm btn-default" ng-click="ctrl.vm.gotoOne()">返回第一步</button>-->
                                    <!--</div>-->

                                </div>
                            </div>
                        </div>
                    </uib-tab>
                    <uib-tab index="4" heading="图片">
                        <div style="background: #fff;padding: 20px;">
                            <div class="panel panel-default">
                                <div class="table-responsive" style="padding:10px 50px;">
                                    <div class="panel-body">
                                        <div style="padding-bottom: 20px; ">
                                            <button class="btn btn-info" ng-click="ctrl.vm.addImg()">添加图片</button>
                                        </div>
                                        <table class="table table-striped b-t b-light">
                                            <thead>
                                            <tr>
                                                <th>图片</th>
                                                <th>缺省文字</th>
                                                <th>排序</th>
                                                <th>默认图</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr ng-repeat="data in ctrl.vm.imgList">
                                                <td style="width: 40%">
                                                    <div class="col-sm-8" style="padding-left: 0;">
                                                        <div class="col-sm-6">
                                                            <img class="content-add-image" style="width: 80%" ng-src="{{data.url|imgwhq:200:400:90}}" err-src="300:300:90" alt="">
                                                        </div>
                                                        
                                                        <div class="col-sm-2" style="padding-top: 12%">
                                                            <input type="file" name="certificate" nv-file-select="" uploader="uploader"
                                                                   ng-click="clearItems($index)" style="position: absolute;width :30%;padding :0 40px ;height:50px;opacity: 0;"/>
                                                            <button class="btn btn-sm btn-default">选择图片</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><input type="text" class="form-control" ng-model="data.alt"></td>
                                                <td><input type="text" class="form-control" ng-model="data.sort"></td>
                                                <td>
                                                    <label class="i-checks">
                                                        <input type="radio" name="testImg" ng-value="{{$index}}" ng-model="defaultImg.index"><i></i>
                                                    </label>
                                                </td>
                                                <td><i class="fa fa-times-circle-o fa-fw  ng-scope"
                                                       role="button" tabindex="0" ng-click="ctrl.vm.imgDel($index)"
                                                        ></i>
                                                </td>
                                            </tr>
                                            <tr ng-if="!ctrl.vm.imgList.length">
                                                <td colspan="12" class="text-center">暂无数据！</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </uib-tab>
                </uib-tabset>
            </div>
        </div>
    </div>
</div>